$(function(){
	$('.h-left').click(function(){
		window.history.back()
	})
	$('.h-right').click(function(){
		window.location.href = "add_arch.html";
	})
	var Swiper_active1 = $('.list .active-nav'),
		Swiper_slide1 = $('.list .swiper-slide');
	var _mySwiperlist = new Swiper('.list', {
		watchSlidesProgress: true,
		watchSlidesVisibility: true,
		slidesPerView:3,
		onTap: function() {
			_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
		}
	})
	var _mySwiperopts = new Swiper('.opts', {
		preloadImages: false,
        lazyLoading: true,
		onSlideChangeStart: function() {
			updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist);
		}
	})
	function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
		Swiper_active.removeClass('active-nav')
		var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active-nav');
		activeNav.siblings().removeClass("active-nav");
		if(!activeNav.hasClass('swiper-slide-visible')) {
			if(activeNav.index() > mySwiper_list.activeIndex) {
				var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
				mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
			} else {
				mySwiper_list.slideTo(activeNav.index())
			}
		}
	}
})
